<!--
  - Copyright (c) 2019-2025, Goshine All rights reserved.
  - Author: liqifeng (liqifena@gmail.com)
  - Date: 2019-11-13
  - Name:'单位组件'
  - Description: 需要显示默认值则 传入showCascader=false 与:orgData="xxxx"（这个为需要显示的数据） 清空方法为 resetOrgName
                使用selectedChange 方法接收参数 参数形式为{orgNo: xxx, orgName: xxx} 树节点选择 方法接收 getSelectedNodes
                showDefault 如果为true 默认显示第一级单位
                transfer属性可以设置下拉组件到body
-->
<template>
  <div class="tree_comp">
    <Input v-model="treeOrgName" v-if="!showCascader" disabled>
      <Button slot="append" icon="ios-more" @click.stop="showTree=!showTree" v-if="buttonShowif"></Button>
    </Input>
    <tree 
    ref="dropTree"
    :treeData="treeData" 
    @closeTree="closeTree" 
    :data-transfer="transfer"
    :transfer="transfer" 
    class="filter-tree"
    :style="{'top': top +'px','left': left + 'px',width: width+'px'}" 
    v-transfer-dom
    :getSelectedNodes="getSelectedNodes" 
    v-show="showTree"></tree>
    <Cascader
      @on-change="handleChange"
      :data="treeData"
      v-model="orgName"
      change-on-select
      transfer
      :render-format="labelFormat"
      v-if="showCascader"
    >
    </Cascader>
  </div>
</template>

<script>
import { getBOrgInfoVOTreeXHR } from "@/api/operation"
import tree from "./tree"
import TransferDom from '../../../node_modules/view-design/src/directives/transfer-dom';
export default {
  props: {
    orgData: {
      type: String,
      default: "",
    },
    showCascader: {
      type: Boolean,
      default: true
    },
    showDefault: {
      type: Boolean,
      default: false //默认不显示第一级单位
    },
    buttonShowif: {
      type: Boolean,
      default: true
    },
    transfer: {
        type: Boolean,
        default: false
    },
  },

 directives: { TransferDom },
  data() {
    return {
      top: 32,
      left: 0,
      width: 200,
      treeData: [],
      orgName: [],
      wantedData: {},
      inputData: "",
      showTree: false,
      treeOrgName: "",
      styles: {}
    };
  },
  computed: {},
  created() {
    this.getcompanyName()
  },
  mounted() {
    // let that = this;
    // document.addEventListener("click", function() {
    //   that.showTree = false;
    // });
    this.$nextTick(() => {
      if(this.transfer){
        this.top=this.$el.getBoundingClientRect().bottom
        this.left=this.$el.getBoundingClientRect().left
      }
      this.width=this.$el.getBoundingClientRect().width
    });
  },
  watch: {
    orgName: {
      handler(nVal){
        if(nVal&&nVal.length>0){
          this.$emit("selectedChange",this.wantedData)
        }else{
          this.$emit("selectedChange",{orgNo: "",orgName: ""})
        }
      },
      deep: true
    },
    orgData: {
      handler(newVal){
        this.treeOrgName = newVal
      }
    },
  },
  methods: {
    closeTree(val){
      this.showTree = val
    },
    //单位名称级联 获取
    getcompanyName() {
      getBOrgInfoVOTreeXHR("getBOrgInfoVOTree", {}, "post").then(res => {
        let resTree = [res];
        let arr = []
        // 递归数据 使之为 label value形式
        resTree.forEach(item=>{
          let obj = {}
          item.title = item.orgName 
          item.value = item.orgNo
          item.label = item.orgName
          obj = {title: item.title,value: item.value,label: item.label}
          if(item.children&&item.children.length>0){
            obj.children = []
            loopList(item.children, obj.children)
            
          }
           arr.push(obj)
        })
        this.treeData = arr
        if(this.showDefault){
          this.treeOrgName = arr[0].label
           this.$emit("selectedChange",{orgNo:  arr[0].value, orgName:  arr[0].label})
          // console.log(arr,"this.orgName")
        }
        function loopList(params,arr) {
          params.forEach(item=>{
            let obj = {}
            item.title = item.orgName 
            item.value = item.orgNo
            item.label = item.orgName
            obj = {title: item.title,value: item.value,label: item.label}
            if(item.children&&item.children.length>0){
              obj.children = []
              loopList(item.children, obj.children)
            }
            arr.push(obj)
          })
        }
      });
    },
    /**
     * 级联change实事件
     */
    handleChange(val,selectedData ) {
      let str = ""
      if(selectedData&&selectedData.length>0){
        str = selectedData[selectedData.length-1]
        this.wantedData = {orgNo: str.value, orgName: str.label}

      }
    },
    /**
     * 树选中节点
     */
    getSelectedNodes(val){
      // console.log(val,"点击树节点")
      if(val&&val.length>0){
         let str = val[0]
        this.wantedData = {orgNo: str.value, orgName: str.label}
        this.treeOrgName = str.label
        this.showTree = false
        this.$emit("getSelectedNodes",{orgNo:  str.value, orgName:  str.label})
      }
     
    },
    /**
     * 清空 v-model的值 在父组件使用this.$refs.xxx.resetOrgName()来清空
     */
    resetOrgName(){
      this.orgName = []
      this.treeOrgName = ""
      console.log(this.treeOrgName,"this.treeOrgName")
    },
    //转化单位名称的显示格式 只显示最后一级单位
    labelFormat(labels, selectedData) {
      const index = labels.length - 1;
      const data = selectedData[index] || false;
      if (data && data.code) {
        return labels[index] + " - " + data.code;
      }
      return labels[index];
    }
  },
  components: { tree }
};
</script>

<style scoped lang="scss">
.tree_comp {
  width: 100%;
  position: relative;
  /deep/.ivu-input {
        border-radius: 4px 0 0 4px;
  }
}
// .tree_comp 
.filter-tree {
  position: absolute;
  z-index: 1000;
  border: 1px solid #eee;
  background: #fff;
  border-radius: 4px;
  max-height: 232px;
  overflow-y: scroll;

}
</style>
